<template>
    <div class="asize-view">
        <el-scrollbar>
            <!-- <el-button type="success" style="width: 100%;" @click="menu.isCollapse = !menu.isCollapse">?</el-button> -->
            <el-menu :style="{ 'width': menu.isCollapse ? '66px' : '200px' }" class="asize-menu" @open="handleOpen"
                @close="handleClose" active-text-color="#ffd04b" background-color="#545c64" text-color="#fff"
                :collapse="menu.isCollapse" :collapse-transition="false">
                <el-menu-item index="0" @click="routerSkip('/nepm/roles')">
                    <el-icon>
                        <Avatar />
                    </el-icon>
                    <span>系统管理员</span>
                </el-menu-item>
                <el-menu-item index="1" @click="routerSkip('/nepm/supervisor')">
                    <el-icon>
                        <ChatDotRound />
                    </el-icon>
                    <span>公众监督员反馈</span>
                </el-menu-item>
                <el-menu-item index="2" @click="routerSkip('/nepm/aqi')">
                    <el-icon>
                        <User />
                    </el-icon>
                    <span>网格员</span>
                </el-menu-item>
                <el-menu-item index="3" @click="routerSkip('/nepm/charts')">
                    <el-icon>
                        <Histogram />
                    </el-icon>
                    <span>数据可视化</span>
                </el-menu-item>
                <!-- <el-menu-item index="4">
                    <el-icon>
                        <Odometer />
                    </el-icon>
                    <span>数据可视化2</span>
                </el-menu-item> -->
            </el-menu>
        </el-scrollbar>
    </div>
</template>

<script setup lang="ts">
import {
    // Location,
    User,
    Avatar,
    Histogram,
    ChatDotRound,
    Odometer,
} from '@element-plus/icons-vue'
import { onMounted, reactive, } from "vue";
import { useRouter } from 'vue-router'
const router = useRouter()
const menu = reactive({
    isCollapse: false,
    handleOpen: (key: string, keyPath: string[]) => {
        console.log(key, keyPath);
    },
    handleClose: (key: string, keyPath: string[]) => {
        console.log(key, keyPath);
    },
})
const routerSkip = (path: string) => {
    router.push(path)
}

let { handleClose, handleOpen, } = menu

onMounted(() => {

})



</script>

<style scoped lang="scss">
.asize-view {
    // margin: 20px 0 0;
    padding: 20px 0 0;
    box-sizing: border-box;
    height: 100%;
    background-color: #f2f3f5;
}

.asize-menu {
    width: 20vw;
    will-change: width;
    transition: 1s 0s ease-in-out width;
}
</style>